@p:36px;
@w:320px;
@h:40px;
@mb:24px;

.transition{
	transition: transform .735s cubic-bezier(.4,1,.2,1), opacity .735s cubic-bezier(.4,1,.2,1);	
}
.hide{
	opacity: 0;
	transform: translate3d(100%,0,0);
}
.show{
	opacity: 1;
	transform: translate3d(0,0,0);
}
.p{
	padding: @p;
}
.form {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -160px 0 0 -160px;
  width: @w;
  height: @w;
  box-shadow: 0 0 100px rgba(0,0,0,.08);
  transition: height .735s cubic-bezier(.4,1,.2,1);	
  overflow:hidden;
  .p();

  button {
    width: 100%;
  }

  p {
    color: rgb(204, 204, 204);
    text-align: center;
    margin-top: 16px;

    span {
      &:first-child {
        margin-right: 16px;
      }
    }
  }
	.forget{
		position: absolute;
		left: 0;
		top: 100px;
		width: 100%;
		.transition();
		.hide();
		.p();
		padding-top: 0;
	}
	.login{
		.transition();
	}
	@but-width:102px;
	.codeInput{
		width: calc(100% e('-') @but-width);
	}
	.codeBut{
		width: @but-width
	}
}

.form.forgetForm{
	height: 366px + @h + @p + @mb;
	.forget{
		.show();
	}
	.login{
		.hide();
		transform: translate3d(-100%,0,0);
	}
}

.logo {
  text-align: center;
  height: @h;
  line-height: @h;
  cursor: pointer;
  margin-bottom: @mb;

  img {
    width: @h;
    margin-right: 8px;
  }

  span {
    vertical-align: text-bottom;
    font-size: 16px;
    text-transform: uppercase;
    display: inline-block;
  }
}

.ant-spin-container,
.ant-spin-nested-loading {
  height: 100%;
}

.forgetSpan{
	margin: 10px 0;
    float: right;
}

.errorOffset{
	:global{
		.has-error.has-feedback:after, .has-success.has-feedback:after, .has-warning.has-feedback:after, .is-validating.has-feedback:after{
			right: 100px;
		}
	}
}
